<template>
	<view class="all-main">
		<view v-if="lists.length > 0" class="main">
			<view class="lists">
				<view class="items">
					<view class="day">
						<text>天数</text>
					</view>
					<view class="users">
						<text>商户名称/编号</text>
					</view>
					<view class="tels"></view>
				</view>
				<view class="items" v-for="(item,index) in lists" :key="index">
					<view class="day">
						>{{item.time_difference}}天
					</view>
					<view class="users">
						<view class="">
							<text>{{item.merchant_name}}</text>
						</view>
						<view class="">
							<text>{{item.merchant_id}}</text>
						</view>
					</view>
					<view class="tels">
						<view class="telBtn" @click="tels(item.merchant_phone)">
							<u-icon name="phone" color="#409EFF" size="14"></u-icon>
							<text>拨打</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				page_size: 10,
				lists: [],
				bottom: true,
			}
		},
		onLoad() {
			this.loadData()
		},
		//上拉加载
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.loadData()
			}
		},
		methods: {
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getMerchantCmList',
					data: {
						page: this.page,
						page_size: this.page_size
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					if (res.data !== undefined && res.data !== null && res.data.length > 0) {
						if (this.page == 1) {
							this.lists = res.data
						} else {
							this.lists = [...this.lists, ...res.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
			tels(phone) {
				if (phone != '') {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F6FC;
	}

	.all-main {
		.main {
			padding: 30rpx;

			.lists {
				padding: 0 30rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				box-shadow: 0px 0px 20px -12px #342f2f;

				.items {
					padding: 30rpx 0;
					display: flex;
					border-bottom: 1px solid #F2F6FC;
					font-size: 28rpx;
					align-items: center;

					.day {
						width: 15%;
						color: #F56C6C;
					}

					.users {
						width: 60%;
						text-align: center;
						font-size: 24rpx;
						overflow: hidden;

						text {
							padding: 10rpx 0;
						}
					}

					.tels {
						width: 25%;
						display: flex;
						justify-content: flex-end;

						.telBtn {
							display: flex;
							border: 1px solid #409EFF;
							padding: 4rpx 20rpx;
							border-radius: 50rpx;
							color: #409EFF;
							align-items: center;

							text {
								font-size: 24rpx;
								padding-left: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>